.panel_default_boxshadow() {
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.15),0 2px 2px 0 rgba(0,0,0,.1),0 1px 5px 0 rgba(0,0,0,.09);
}

.panel_default_boxshadow_hover() {
  box-shadow: 0 2px 12px -1px rgba(0,0,0,.3),0 4px 5px 0 rgba(0,0,0,.11),0 1px 10px 0 rgba(0,0,0,.1);
}

.box-shadow-hover-transition() {
  transition: .3s cubic-bezier(.25,.8,.25,1);
}

.font-family-monospace() {
  font-family: Menlo, Monaco, "Liberation Mono", Consolas, monospace;
}

// Sequences of whitespace are preserved. Lines are broken at newline
// characters, at <br>, and as necessary to fill line boxes.
.pre-wrap {
  white-space: pre-wrap;
}

// Linear-gradient stripes
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
  background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
  background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
}

.unselectable() {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

// WebKit-style focus

.tab-focus() {
  // Default
  outline: thin dotted !important;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color !important;
  outline-offset: -2px !important;
}

// Nav icon text positioning
.primary-nav-icon-xl() {
  display: inline-block;
  width: 25px;
  margin-right: 10px;
}

// additional visiblility utility for xlg
.visible-xlg-inline-block {
  display: none !important;
}
.visible-xlg-inline-block {
  @media (min-width: @screen-xl-min) {
    display: inline-block !important;
  }
}

// Truncate or word-break long strings within tables
// Wrap when < 768 & truncate when > 769
.td-long-string {
  @media (max-width: @screen-xs-max) {
    .word-break();
  }
  @media (min-width: @screen-sm-min) {
    max-width: 170px;
    .text-overflow();
  }
  @media (min-width: @screen-md-min) {
    max-width: 260px
  }
  @media (min-width: @screen-lg-min) {
    max-width: 370px
  }
  @media (min-width: @screen-xl-min) {
    max-width: 540px
  }
}
